<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div class="content_top">
            <el-row>
                <el-col :span="20">
                    <el-form :inline="true" size="mini" label-width="10px;">
                        <el-form-item label="状态:">
                            <el-select v-model="condition.status" size="mini" placeholder="请选择" class="form-item">
                                <el-option label="未发布" :value="1"></el-option>
                                <el-option label="已发布" :value="2"></el-option>
                                <el-option label="已下线" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-button icon="el-icon-search" type="primary" size="mini" @click="loadList">查 询&nbsp;&nbsp;</el-button>
                    </el-form>
                </el-col>
                <el-col :span="4" style="text-align: right">
                    <el-button icon="el-icon-plus" type="success" circle size="mini" @click="showSave(null)"></el-button>
                </el-col>
            </el-row>
        </div>

        <el-table :data="data.data" border stripe highlight-current-row style="width: 100%" size="mini">
            <el-table-column type="index" header-align="center" align="center" width="60px"/>
            <el-table-column prop="batchNumber" label="批次号" header-align="center" align="center"/>
            <el-table-column prop="couponName" label="券名称" header-align="center" align="center"/>
            <el-table-column prop="startDate" label="开始时间" header-align="center" align="center"/>
            <el-table-column prop="endDate" label="结束时间" header-align="center" align="center"/>
            <el-table-column prop="validityDate" label="券有效期" header-align="center" align="center"/>
            <el-table-column prop="amount" label="券金额" header-align="center" align="center"/>
            <el-table-column prop="count" label="发放总数" header-align="center" align="center"/>
            <el-table-column prop="receiveCount" label="已领取数" header-align="center" align="center"/>
            <el-table-column prop="createUserName" label="创建人" header-align="center" align="center" width="150px"/>
            <el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="150px;"/>
            <el-table-column prop="action" fixed="right" label="操作" header-align="center" align="center" width="150px;">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" v-if="scope.row.status === 1" @click="showSave(scope.row)">修改</el-button>
                    <el-button type="text" size="mini" v-if="scope.row.status === 1" @click="confirm(scope.row.id, 2)" style="color: green">发布</el-button>
                    <el-button type="text" size="mini" v-if="scope.row.status === 1" @click="confirm(scope.row.id, 1)" style="color: red">删除</el-button>
                    <el-button type="text" size="mini" v-if="scope.row.status > 1" @click="showSave(scope.row)">详情</el-button>
                    <el-button type="text" size="mini" v-if="scope.row.status === 2" @click="confirm(scope.row.id, 3)" style="color: red">下线</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="content_bottom" style="text-align: center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="condition.currentPage" :page-size="condition.pageSize" :total="data.total"
                           :page-sizes="[10, 15, 20, 30, 50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>

        <el-dialog :title="viewType === 1 ? '新增' : (viewType === 2 ? '修改' : '详情')" :visible.sync="dialogVisible" width="700px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="110px" size="mini" inline :disabled="status > 1">
                <el-form-item label="批次号：" prop="batchNumber">
                    <el-input v-model="form.batchNumber" style="width: 190px;"></el-input>
                </el-form-item>
                <el-form-item label="券名称：" prop="couponName">
                    <el-input v-model="form.couponName" style="width: 190px;"></el-input>
                </el-form-item>
                <el-form-item label="开始时间：" prop="startDate">
                    <el-date-picker v-model="form.startDate" type="datetime" placeholder="选择日期时间" style="width: 190px;"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间：" prop="endDate">
                    <el-date-picker v-model="form.endDate" type="datetime" placeholder="选择日期时间" style="width: 190px;"></el-date-picker>
                </el-form-item>
                <el-form-item label="有效期：" prop="validityDate">
                    <el-date-picker v-model="form.validityDate" type="datetime" placeholder="选择日期时间" style="width: 190px;"></el-date-picker>
                </el-form-item>
                <el-form-item label="券面值：" prop="validityDate">
                    <el-input-number v-model="form.amount" :min="1" :precision="2" style="width: 190px;"></el-input-number>
                </el-form-item>
                <el-form-item label="满多少可用：" prop="orderPriceLimit">
                    <el-input-number v-model="form.orderPriceLimit" :min="1" :precision="2" style="width: 190px;"></el-input-number>
                </el-form-item>
                <el-form-item label="发行总数：" prop="count">
                    <el-input-number v-model="form.count" :min="1" style="width: 190px;"></el-input-number>
                </el-form-item>
                <el-form-item style="text-align: center; width: 100%" v-show="status === 1">
                    <el-button type="primary" @click="onSubmit" :loading="btnLoading">保存</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
                <div v-show="status > 1" style="padding: 10px">
                    https://static.xiaoweihy.com/QR/foodgroup?id={{ batchId }}
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {batchList, addBatch, modifyBatch, removeBatch, releaseBatch, offlineBatch} from '@/api/activity/batch'

    export default {
        name: 'Batch',
        data() {
            return {
                loading: false,
                dialogVisible: false,
                btnLoading: false,
                condition: {
                    currentPage: 1,
                    pageSize: 30,
                    status: 2,
                },
                viewType: 1,
                data: {},
                batchId: null,
                status: 1,
                form: {
                    batchNumber: "",
                    couponName: "",
                    startDate: null,
                    endDate: null,
                    validityType: 1,
                    validityDate: null,
                    amount: 0,
                    orderPriceLimit: 0,
                    count: 0,
                    everyoneCount: 1
                },
                rules: {
                    batchNumber: [
                        {required: true, message: '请输入批次号', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                    ],
                    couponName: [
                        {required: true, message: '请输入券名称', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    startDate: [
                        {required: true, message: '请输入开始时间', trigger: 'blur'},
                    ],
                    endDate: [
                        {required: true, message: '请输入结束时间', trigger: 'blur'},
                    ],
                    validityDate: [
                        {required: true, message: '请输入券有效期', trigger: 'blur'},
                    ],
                    amount: [
                        {required: true, message: '请输入券面值', trigger: 'blur'},
                    ],
                    orderPriceLimit: [
                        {required: true, message: '请输入满多少可用', trigger: 'blur'},
                    ],
                    count: [
                        {required: true, message: '请输入发放数量', trigger: 'blur'},
                    ]
                }
            }
        },
        computed: {},
        mounted() {
            this.loadList()
        },
        methods: {
            handleSizeChange(val) {
                this.condition.pageSize = val
                this.loadList()
            },
            handleCurrentChange(val) {
                this.condition.currentPage = val
                this.loadList()
            },
            async loadList() {
                this.loading = true
                let res = await batchList(this.condition)
                this.loading = false
                if (res.code !== "0") return
                this.data = res
            },
            confirm(id, model) {
                this.$confirm('确定要这么操作吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.execute(id, model);
                });
            },
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.save()
                    } else {
                        return false;
                    }
                });
            },
            async save() {
                this.btnLoading = true;
                let res = null;
                if (this.batchId === null) {
                    res = await addBatch((this.form))
                } else {
                    res = await modifyBatch(this.batchId, this.form)
                }

                this.btnLoading = false
                if (res.code !== '0') {
                    return this.$notify.error({title: '消息', message: res.message})
                }
                this.$notify({title: '消息', message: '保存成功', type: 'success'});
                this.dialogVisible = false
                this.$refs.form.resetFields();
                this.status = 1;
                this.batchId = null;
                if (!this.batchId) {
                    this.condition.status = 1
                    this.loadList()
                }
            },
            async execute(id, model) {
                this.loading = true;
                let res = null
                switch (model) {
                    case 1:
                        res = await removeBatch(id)
                        break;
                    case 2:
                        res = await releaseBatch(id)
                        break;
                    case 3:
                        res = await offlineBatch(id)
                        break;
                }
                this.loading = false
                if (res.code !== '0') {
                    this.$message.warning(res.message)
                    return
                }
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
                this.loadList()
            },
            showSave(row) {
                this.dialogVisible = true
                if (this.$refs.form) {
                    this.$refs.form.resetFields();
                }
                this.status = 1
                this.batchId = null
                if (row) {
                    this.batchId = row.id
                    this.status = row.status

                    this.form.batchNumber = row.batchNumber
                    this.form.couponName = row.couponName
                    this.form.startDate = row.startDate
                    this.form.endDate = row.endDate
                    this.form.validityType = row.validityType
                    this.form.validityDate = row.validityDate
                    this.form.amount = row.amount
                    this.form.orderPriceLimit = row.orderPriceLimit
                    this.form.count = row.count
                    this.form.everyoneCount = row.everyoneCount
                }
            }
        }
    }
</script>

<style scoped>

</style>